/** * @Description: 订单页 * @author Administrator */
<template>
	<view class="order">
		
		<view class="box">
			<!-- 导航栏 -->
			<u-sticky>
				<view class="order_nav">
					<view class="order_nav_item" :class="statusCurrent == index ? 'active' : ''" v-for="(item, index) in list" :key="index" @click="clickHandle(index)">
						{{ item.name }}
					</view>
				</view>
			</u-sticky>
			

			<template v-if="statusCurrent === 0">
				<!-- 待支付 -->
				<to-pay ref="orderPage"></to-pay>
			</template>
			
			<template v-else-if="statusCurrent === 1">
				<!-- 待接单 -->
				<to-order ref="orderPage"></to-order>
			</template>
			
			<template v-else-if="statusCurrent === 2">
				<!-- 已接单 -->
				<ordered ref="orderPage"></ordered>
			</template>
			
			<template v-else="statusCurrent === 3">
				<!-- 已配送 -->
				<delivery ref="orderPage"></delivery>
			</template>
			
		</view>
		
		<!-- 提示 -->
		<u-toast ref="uToast" />
		
		<!-- 取消弹窗 -->
		<u-modal content="确定取消吗?" show-cancel-button="true" v-model="cancelShow" @confirm="cancel" ref="uModal" :async-close="true"></u-modal>
	</view>
</template>

<script>
import toPay from "./components/toPay.vue"//待支付
import toOrder from "./components/toOrder.vue"//待接单
import ordered from "./components/ordered.vue"//待支付
import delivery from "./components/delivery.vue"//待支付


export default {
	components:{
		toPay,
		toOrder,
		ordered,
		delivery
	},
	data() {
		return {
			list: [
				{
					name: '待支付'
				},
				{
					name: '待接单'
				},
				{
					name: '已接单'
				},
				{
					name: '已配送'
				}
			],
			statusCurrent: 0,//顶部状态
		};
	},
	methods: {
		async clickHandle(idx) {
			//点击导航栏
			this.statusCurrent = idx;
		},
	},
	onLoad(option){//页面加载
		if(Number(option.statusCurrent)){
			this.statusCurrent = Number(option.statusCurrent)
		}
	},
	onReachBottom(){//上拉加载更多
		this.$refs.orderPage.reachBottom()
	},
	onPullDownRefresh(){//下拉刷新
		this.$refs.orderPage.pullDownRefresh()
	}
};
</script>

<style lang="scss" scoped>
.order{
	height: 100%;
	.box{
		height: 100%;
	}
}
// 空空如也
.empty{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.pay{
	text-align: right;
}

// 加载效果
.loading {
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}
// 点击导航栏
.active {
	color: #dc2c52;
	border-radius: 4rpx;
	border-bottom: 7rpx solid #dc2c52;
}
/* 导航栏 */
.order_nav {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #cccccc;
	justify-content: space-around;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: bold;

	.order_nav_item {
	}
}
// 菜单卡片样式
.order_msg {
	// border-top:1px solid #cccccc;
	border-bottom: 8px solid #f8f2f2;

	.order_header {
		border-bottom: 1px solid #f0f0f0;
		padding: 10rpx;
		box-sizing: border-box;

		.order_header_item {
			padding: 5px 0 5px 10px;
		}
	}

	.order_container {
		padding: 10px;

		.container_food {
			display: flex;
			/* 套餐图片 */
			.container_food_img {
				widht: 120px;
				height: 120px;

				image {
					width: 120px;
					height: 100%;
					border-radius: 18px;
				}
			}

			.container_food_msg {
				padding: 0 0 0 10px;
				/* 菜名信息样式 */
				.container_food_item {
					color: #aaaaaa;
					
					padding-top: 2rpx;
					word-break: break-word;
					

					.cls {
						color: #3a3a3a;
						font-size: 33rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 449rpx;
						font-weight: bold;
					}
				}
			}
		}
		
	}
}
/* 取消订单按钮 */
		.food_footer {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			.btn{
				margin: 0 5rpx;
			}
		}
</style>
